<template>
    <div class="typeselect">
        <div class="title">
            {{label}}
        </div>
        <div class="select_con">
            <div :class="'' == value ? 'active' : 'select_con_item'" @click="handleAllClick({})">全部 </div>

            <div :class="item[props.value] == value ? 'active' : 'select_con_item'" v-for="(item,index) in newdataList" :key="index"
                @click="handleClick(item,index+1)">{{item.dicname}} </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: '',
        },
        dataList: {
            type: Array,
            default: () => [],
        },
        activeValue: {
            type: String,
            default: '',
        },
        value: {
            type: String,
            default: '',
        },
        props: {
            type: Object,
            default: () => ({
                label: 'dicname',
                value: 'diccode',
            }),
        },
        afterQuery: {
            type: Function,
            default: function(){}
        }
    },
    components: {},
    async asyncData(context) {},
    data() {
        return {};
    },
    computed: {
        newdataList: function () {
            return this.dataList.map((item) => {
                return {
                    ...item,
                    isselect: false,
                };
            });
        },
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },

    watch: {},

    methods: {
        handleClick: function (val,index) {
            this.model = val[this.props.value];
            
            this.$emit('setClick', val);
            !!this.afterQuery && this.afterQuery(index ,val);
        },
        handleAllClick() {
            this.model = '';
            let aa = {
                [this.props.value] : '',
                [this.props.label] : '全部',
                children : null,
            }
            this.$emit('setClick', aa);
            !!this.afterQuery && this.afterQuery('0' ,aa);

        },
    },
    created() {},
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.typeselect {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .title {
        padding:0 6px ;
        min-width: 82px;
        font-weight: 800;
    }
    .select_con {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;

        .select_con_item {
            height: 26px;
            cursor: pointer;
            margin: 6px 12px 6px 0;
            padding: 4px 6px;
        }

        .active {
            height: 26px;
            cursor: pointer;
            margin: 6px 12px 6px 0;
            padding: 4px 6px;
            background-color: $primaryColor;
            color: white;
        }
        div:hover {
            background-color: $primaryColor;
            color: white;
        }
    }
}
</style>
